import React, {Component} from 'react';
import './comment.css';
import PropTypes from 'prop-types';

class CommentInput extends Component {
    static propTypes = {
        onSubmit: PropTypes.func
    }

    constructor() {
        super();
        this.state = {
            username: "",
            content: "",
            dateTime: + Date.now()
        }
    }

    componentWillMount() {
        let username = localStorage.getItem("username") || "";
        this.setState({username: username})
    }

    componentDidMount() {
        console.log(this.xxx)
        this
            .xxx
            .focus();
    }

    onChangeInputValue(event) {
        this.setState({username: event.target.value})
    }
    onChangeTextareaValue(event) {
        this.setState({content: event.target.value})
    }

    onBlurCandle(event) {
        localStorage.setItem("username", event.target.value)
    }

    onSubmitValue() {
        if (this.props.onSubmit) {
            const {username, content, dateTime} = this.state;
            this
                .props
                .onSubmit({username, content, dateTime});
        }
        this.setState({content: ""});
    }

    render() {
        return (
            <div className="comment-input">
                <div className="comment-name">
                    <div className="comment-left">用户:</div>
                    <div className="comment-right">
                        <input
                            type="text"
                            value={this.state.username}
                            onChange={this
                            .onChangeInputValue
                            .bind(this)}
                            ref={(input) => this.xxx = input}
                            onBlur={this
                            .onBlurCandle
                            .bind(this)}/>
                    </div>
                </div>
                <div className="comment-content">
                    <div className="comment-left">评价内容:</div>
                    <div className="comment-right">
                        <textarea
                            value={this.state.content}
                            onChange={this
                            .onChangeTextareaValue
                            .bind(this)}/>
                    </div>
                </div>
                <div className="comment-submit">
                    <button
                        onClick={this
                        .onSubmitValue
                        .bind(this)}>发表评论</button>
                </div>
            </div>
        )
    }
}

export default CommentInput;